<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/nav.css" />
	</head>

	<body>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">IM</h1>
			<a class="mui-icon mui-icon-reload mui-pull-right" onclick="location.reload()"></a>
		</header>
		<div class="mui-content">
			<button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="init()">初始化</button>
			<button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="isInit()">初始化状态</button>

			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">页眉</div>
				<!--内容区-->
				<div id="content" class="mui-card-content"></div>
			</div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input id="username" type="text" class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id="password" type="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary" onclick="register()">注册</button>
					<button type="button" class="mui-btn mui-btn-danger">取消</button>
				</div>
			</form>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户名</label>
					<input id="username1" type="text" class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id="password1" type="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary" onclick="login()">登录</button>
					<button type="button" class="mui-btn mui-btn-danger">取消</button>
				</div>
			</form>
		</div>
		<script src="../../js/commons.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jmessage-sdk-web.2.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var MIND = {
				appkey: '1dfc2313a1c982a3e3522363',
				random_str: '404',
				timestamp: new Date().getTime(),
			}
			mui.plusReady(function() {
				CommonsFunction.setHeaderBackground();
			})
			window.JIM = new JMessage({
				debug: true
			});

			function show(text) {
				document.getElementById('content').innerHTML = '<p style="margin-left: 16px">' + text + '</p>';
			};

			function init() {
				JIM.init({
					"appkey": MIND.appkey,
					"random_str": MIND.random_str,
					"signature": hex_md5("appkey=" + MIND.appkey + "&timestamp=" + MIND.timestamp + "&random_str=" + MIND.random_str + "&key=09b3d3dd46ab47bcf23cbbf5"),
					"timestamp": MIND.timestamp,
					"flag": 1
				}).onSuccess(function(data) {
					console.log('success:' + JSON.stringify(data));
					show('success' + JSON.stringify(data) + '成功');
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data))
					show('error: ' + JSON.stringify(data) + '失败');
				});
			}

			function isInit() {
				show('isInit:' + JIM.isInit());
			}
			JIM.onDisconnect(function() {
				init();
			});

			function register() {
				JIM.register({
					'username': document.getElementById('username').value,
					'password': document.getElementById('password').value,
				}).onSuccess(function(data) {
					show('success' + JSON.stringify(data) + '注册成功');
				}).onFail(function(data) {
					show('error: ' + JSON.stringify(data) + '注册失败');
				});
			};

			function login() {
				JIM.login({
					'username': document.getElementById('username1').value,
					'password': document.getElementById('password1').value
				}).onSuccess(function(data) {
					show('success' + JSON.stringify(data) + '登录成功');
				});
			}
		</script>
	</body>

</html>